<template>
	<div class="product_con">
		<el-row>
			<el-col class="title-col" :span="24"
				><div class="grid-content bg-purple-dark product-title">
					<div><span class="iconfont">&#xe618;</span>修改分类信息</div>
				</div></el-col
			>
		</el-row>
		<div style="margin: 20px;"></div>
		<el-form
			:model="productValue"
			label-width="120px"
			:rules="rules"
			ref="ruleForm"
			class="demo-ruleForm"
			label-position="left"
		>
			<el-form-item label="分类名称:" prop="name">
				<el-input v-model="productValue.name"></el-input>
			</el-form-item>
			<el-form-item label="上级分类:">
				<el-select v-model="productValue.parent_id" placeholder="请选择">
					<el-option
						v-for="item in productCateOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="数量单位:">
				<el-input v-model="productValue.product_unit" style="width:500px;"></el-input>
			</el-form-item>
			<el-form-item label="排序:">
				<el-input v-model="productValue.sort" style="width:100px;"></el-input>
			</el-form-item>
            <el-form-item label='是否显示:'>
                <el-radio-group v-model='productValue.show_status'>
                    <el-radio :label='1'>是</el-radio>
                    <el-radio :label='0'>否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='是否显示在导航栏:'>
                <el-radio-group v-model='productValue.nav_status'>
                    <el-radio :label='1'>是</el-radio>
                    <el-radio :label='0'>否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='关键词:'>
                <el-input v-model='productValue.keywords'></el-input>
            </el-form-item>
            <el-form-item label='分类描述:'>
                <el-input v-model='productValue.description'></el-input>
            </el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')"
					>修改</el-button
				>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import { fetchProductCateOne,editProductCate,fetchProductCatePage } from "@/api/product";
export default {
	name: "productCateupdate",
	data() {
		return {
			labelPosition: "left",
			productValue: {
				
			},
			rules: {
				//验证规则
				name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
			},
			productCateOptions: [], //分类的下拉列表数据
		};
	},
	methods: {
		submitForm(formName) {
			//validate 是一个函数，功能是对表单进行验证
			//参数是回调函数， 回调函数中的参数 valid 的值可以是 true（验证通过） 或false（验证失败）
			//console.log(this.$refs[formName]);//element ui 封装的 表单组件
			console.log(this.$refs[formName]);
			this.$refs[formName].validate((valid) => {
				console.log(valid);
				if (valid) {
					console.log("可以提交表单");
					//调用 后台接口,添加 商品数据
					editProductCate(this.productValue).then((res) => {
						console.log(res);
						if (res.status == 200) {
							this.$message({
								message: "商品分类信息添加成功~",
								type: "success",
							});
							this.$router.push("/pms/productCate");
						} else {
							console.log("验证失败");
							return false;
						}
					});
				}
			});
		},
        async getOneProductCate(){
            let res= await fetchProductCateOne({id:this.$route.params.id})
            this.productValue=res.data;
            console.log(1);
            this.getProductCatePage()
        },
        async getProductCatePage(){
            let res= await fetchProductCatePage({},0);
            //重组数据
            this.productCateOptions.push({value:0,label:'顶级分类'});
            res.data.forEach(item=>{
                this.productCateOptions.push({
                    value:item.id,
                    label:item.name
                })
            })
            console.log(this.productCateOptions);
        }
	},
    mounted(){
        this.getOneProductCate();
    }
};
</script>
<style scoped lang="scss">
.product_con {
	margin: 10px;
	.title-col {
		border: 1px solid #ebeef5;
		margin-bottom: 10px;
		padding: 20px;
	}
}
</style>
